<template>
    <div>
        <!-- <div class="aaa" :class="aaa">这是一个div</div> -->
        <!-- <div :class="[aaa,'aaa']">这是一个div</div> -->
        <!-- <div style="background:red;">这是一个div</div> -->
        <!-- <div :style="{background:'red',fontSize:'30px'}">这是一个div</div> -->
        <!-- <div :style="{'background':'red'}">这是一个div</div> -->
        <!-- <div :style="bkgd?'background:red':'background:green'">这是一个div</div> -->
        <!-- <div :style="[{'background':'red'},{'fontSize':'30px;'}]">这是一个div</div> -->
        <!-- <button @click="fn">click</button> {{num}}---{{data}} -->
        <!-- <Fn :zi="zi" @child="text" /> -->
        <input type="text" v-model="obj.name" />
        <input type="checkbox" name="hobby" v-model="obj.hobby" value="吃" />吃
        <input type="checkbox" name="hobby" v-model="obj.hobby" value="喝" />喝
        <input type="checkbox" name="hobby" v-model="obj.hobby" value="玩" />玩
        <input type="checkbox" name="hobby" v-model="obj.hobby" value="乐" />乐
        <br />
        <select name="" id="" v-model="obj.edu">
        <option value="未选择">请选择</option>
        <option value="小学">小学</option>
        <option value="初中">初中</option>
        <option value="高中">高中</option>
        <option value="大学">大学</option>
        </select>
        {{obj}}
        <input type="text" v-focus>
    </div>
</template>

<script>
import Fn from "./components/FN";
export default {
  data() {
    return {
      aaa: "bbb",
      bkgd: false,
      num: 1,
      zi: 147852369,
      childs: "",
      obj: { edu: 0, hobby: [] }
    };
  },
  methods: {
    fn() {
      this.num++;
    },
    text(val) {
      console.log(val);
      this.childs = val;
    }
  },
  computed: {
    data() {
      return (this.num += 2);
    }
  },
  filters: {
    aaa(val) {
      return val > 100 ? "大于100" : "小于100";
    }
  },
  directives: {
    focus: {
      bind(el) {
        console.log(el);
      },
      inserted(el) {
        console.log(el);
      },
      update(el) {
        console.log(el);
      },
      componentUpdated(el) {
        console.log(el);
      },
      unbind(el) {
        console.log(el);
      }
    }
  },
  watch: {
    obj: {
      handler(newval, oldval) {
        console.log(newval);
        console.log(oldval);
      },
      deep: true, //深度监听
      immediate: true //初始化就监听
    }
  },
  beforeCreate() {//刚被创建
    console.log(this.a);
  },
  created() {//创建完成
    console.log(this.a);
  },
  beforeMount() {//挂载之前
    console.log(document.getElementsByTagName("p")[0]);
  },
  mounted() {//编译成功
    console.log(document.getElementsByTagName("p")[0]);
  },
  components: {
    Fn
  }
};
</script>

<style scoped>
</style>